<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>提示工具条</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <div class="page-header">
            <h3>
                Hello Word
                <small>欢迎您</small>
            </h3>
        </div>
        <p class="muted">
            Welcome to <a href="#" data-toggle="tooltip" title="One Tip">Hello Word</a>
            Welcome to Hello Word Welcome to <a href="#" data-toggle="tooltip" data-placement="top" title="One Tip">Hello Word</a>
            Welcome to Hello WordWelcome to Hello WordWelcome to  <a href="#" data-toggle="tooltip" data-placement="top" title="One Tip">Hello Word</a>
            Welcome to Hello Word Welcome to Hello Word Welcome to  <a href="#" data-toggle="tooltip" data-placement="top" title="One Tip">Hello Word</a>
            Welcome to Hello WordWelcome to Hello Word
        </p>

        <button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
            Tooltip on top
        </button>
        <button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
            Tooltip on left
        </button>
        <button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
            Tooltip on right
        </button>
        <button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
            Tooltip on bottom
        </button>
    </div>


    <script src="../js/jquery-3.3.1.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script>
        $(function () {
            $('[data-toggle="tooltip"]').tooltip();
        });
    </script>
</body>
</html>